<template>
    <div class="home-top">
        <h3>人气推荐</h3>
        <div class="content">
            <van-card
                v-for="item in goodsList"
                :key="item.id"
                :tag="item.tag"
                :price="item.retail_price"
                :origin-price="item.origin_price"
                :desc="item.goods_brief"
                :title="item.name"
                :thumb="item.list_pic_url">
            </van-card>
        </div>
    </div>
</template>

<script setup>
const goodsList = [
    {
        id: 1,
        tag: 'Top1',
        retail_price: '299.00',
        goods_brief: '一级桑蚕丝，轻盈、透气、柔软',
        name: '蚕丝被，正品蚕丝被',
        list_pic_url: '/images/top1.jpg'
    },
    {
        id: 2,
        tag: 'Top2',
        retail_price: '88.00',
        origin_price: '98.00',
        goods_brief: '安全，不会侧翻',
        name: '儿童摇摇马',
        list_pic_url: '/images/top2.jpg'
    },
    {
        id: 3,
        tag: 'Top3',
        retail_price: '128.00',
        origin_price: '168.00',
        goods_brief: '轻松看书',
        name: '懒人沙发',
        list_pic_url: '/images/top3.jpg'
    },
    {
        id: 4,
        tag: 'Top4',
        retail_price: '199.00',
        origin_price: '205.00',
        goods_brief: '大颗粒',
        name: '儿童积木',
        list_pic_url: '/images/top4.jpg'
    },
    {
        id: 5,
        tag: 'Top5',
        retail_price: '89.00',
        origin_price: '99.00',
        goods_brief: '儿童扭扭车万向轮',
        name: '扭扭车',
        list_pic_url: '/images/top5.jpg'
    }
]
</script>

<style lang="less" scoped>
.home-top {
    h3 {
        font-size: 22px;
        line-height: 30px;
        text-align: center;
        margin: 0.5rem 0;
    }
    .content {
        --van-tag-primary-color: #ff8000;
        --van-card-font-size: 16px;
        --van-card-background: #f9f9f9;
        background: var(--van-card-background);
        :deep(.van-card) {
            margin-top: 0;
            .van-card_title {
                padding: 10px 0 5px;
            }
            .van-card_price-currency {
                font-size: var(--van-card-font-size);
            }
        }
        &::after {
            content: '';
            display: block;
            height: 3rem;
        }
    }
}
</style>